<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Trizzy</title>

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors/green.css" id="colors">
 
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body class="boxed">
<div id="wrapper">


<!-- Top Bar
================================================== -->
<div id="top-bar">
	<div class="container">

		<!-- Top Bar Menu -->
		<div class="ten columns">
			<ul class="top-bar-menu">
				<li><i class="fa fa-phone"></i> (564) 123 4567</li>
				<li><i class="fa fa-envelope"></i> <a href="about.html#">mail@example.com</a></li>
				<li>
					<div class="top-bar-dropdown">
						<span>English</span>
						<ul class="options">
							<li><div class="arrow"></div></li>
							<li><a href="about.html#">English</a></li>
							<li><a href="about.html#">Polish</a></li>
							<li><a href="about.html#">Deutsch</a></li>
						</ul>
					</div>
				</li>
				<li>
					<div class="top-bar-dropdown">
						<span>USD</span>
						<ul class="options">
							<li><div class="arrow"></div></li>
							<li><a href="about.html#">USD</a></li>
							<li><a href="about.html#">PLN</a></li>
							<li><a href="about.html#">EUR</a></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		
		<!-- Social Icons -->
		<div class="six columns">
			<ul class="social-icons">
				<li><a class="facebook" href="about.html#"><i class="icon-facebook"></i></a></li>
				<li><a class="twitter" href="about.html#"><i class="icon-twitter"></i></a></li>
				<li><a class="dribbble" href="about.html#"><i class="icon-dribbble"></i></a></li>
				<li><a class="gplus" href="about.html#"><i class="icon-gplus"></i></a></li>
				<li><a class="pinterest" href="about.html#"><i class="icon-pinterest"></i></a></li>
			</ul>
		</div>

	</div>
</div>

<div class="clearfix"></div>


<!-- Header
================================================== -->
<div class="container">

	<!-- Logo -->
	<div class="four columns">
			<div id="logo">
				<h1><a href="index.html"><img src="images/logo.png" alt="Trizzy" /></a></h1>
			</div>
	</div>
	

	<!-- Additional Menu -->
	<div class="twelve columns">
		<div id="additional-menu">
			<ul>
				<li><a href="shopping-cart.html">Shopping Cart</a></li>
				<li><a href="wishlist.html">WishList <span>(2)</span></a></li>
				<li><a href="checkout-billing-details.html">Checkout</a></li>
				<li><a href="my-account.html">My Account</a></li>
			</ul>
		</div>
	</div>

	
	<!-- Shopping Cart -->
	<div class="twelve columns">

		<div id="cart">
				
			<!-- Button -->
			<div class="cart-btn">
				<a href="about.html#" class="button adc">$178.00</a>
			</div>

			<div class="cart-list">

			<div class="arrow"></div>

				<div class="cart-amount">
					<span>2 items in the shopping cart</span>
				</div>

					<ul>
						<li>
							<a href="about.html#"><img src="images/small_product_list_08.jpg" alt="" /></a>
							<a href="about.html#">Converse All Star Trainers</a>
							<span>1 x $79.00</span>
							<div class="clearfix"></div>
						</li>

						<li>
							<a href="about.html#"><img src="images/small_product_list_09.jpg" alt="" /></a>
							<a href="about.html#">Tommy Hilfiger <br /> Shirt Beat</a>
							<span>1 x $99.00</span>
							<div class="clearfix"></div>
						</li>
					</ul>

				<div class="cart-buttons button">
					<a href="shopping-cart.html" class="view-cart" ><span data-hover="View Cart"><span>View Cart</span></span></a>
					<a href="checkout-billing-details.html" class="checkout"><span data-hover="Checkout">Checkout</span></a>
				</div>
				<div class="clearfix">

				</div>
			</div>

		</div>

		<!-- Search -->
		<nav class="top-search">
			<form action="about.html#" method="get">
				<button><i class="fa fa-search"></i></button>
				<input class="search-field" type="text" placeholder="Search" value=""/>
			</form>
		</nav>

	</div>

</div>


<!-- Navigation
================================================== -->
<div class="container">
	<div class="sixteen columns">

		<a href="about.html#menu" class="menu-trigger"><i class="fa fa-bars"></i> Menu</a>

		<nav id="navigation">
			<ul class="menu" id="responsive">
			  
				<li><a href="index.html" class="homepage">Home</a></li>
				

				<li class="dropdown">
					<a href="about.html#">Shop</a>
					<ul>
						<li><a href="shop-with-sidebar.html">Shop With Sidebar</a></li>
						<li><a href="shop-full-width.html">Shop Full Width</a></li>
						<li><a href="checkout-billing-details.html">Checkout Pages</a></li>
						<li><a href="shop-categories-grid.html">Categories Grid</a></li>
						<li><a href="single-product-page.html">Single Product Page</a></li>
						<li><a href="variable-product-page.html">Variable Product Page</a></li>
						<li><a href="wishlist.html">Wishlist Page</a></li>
						<li><a href="shopping-cart.html">Shopping Cart</a></li>
					</ul>
				</li>

			  
				<li>
					<a href="about.html#" class="current">Features</a>
					<div class="mega">
						<div class="mega-container">

							<div class="one-column">
								<ul>
									<li><span class="mega-headline">Example Pages</span></li>
									<li><a href="contact.html">Contact</a></li>
									<li><a href="about.html">About Us</a></li>
									<li><a href="services.html">Services</a></li>
									<li><a href="faq.html">FAQ</a></li>
									<li><a href="404-page.html">404 Page</a></li>
								</ul>
							</div>

							<div class="one-column">
								<ul>
									<li><span class="mega-headline">Featured Pages</span></li>
									<li><a href="index-2.html">Business Homepage</a></li>
									<li><a href="shop-with-sidebar.html">Default Shop</a></li>
									<li><a href="blog-masonry.html">Masonry Blog</a></li>
									<li><a href="variable-product-page.html">Variable Product</a></li>
									<li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
								</ul>
							</div>

							<div class="one-column hidden-on-mobile">
								<ul>
									<li><span class="mega-headline">Paragraph</span></li>
									<li><p>This <a href="about.html#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p></li>
								</ul>
							</div>

							<div class="one-fourth-column hidden-on-mobile">
								<a href="about.html#" class="img-caption margin-reset">
									<figure>
										<img src="images/menu-banner-01.jpg" alt="" />
										<figcaption>
											<h3>Jeans</h3>
											<span>Pack for Style</span>
										</figcaption>
									</figure>
								</a>
							</div>

							<div class="one-fourth-column hidden-on-mobile">
								<a href="about.html#" class="img-caption margin-reset">
									<figure>
										<img src="images/menu-banner-02.jpg" alt="" />
										<figcaption>
											<h3>Sunglasses</h3>
											<span>Nail the Basics</span>
										</figcaption>
									</figure>
								</a>
							</div>

							<div class="clearfix"></div>
						</div>
					</div>
				</li>


				<li class="dropdown">
					<a href="about.html#">Shortcodes</a>
					<ul>
						<li><a href="elements.html">Elements</a></li>
						<li><a href="typography.html">Typography</a></li>
						<li><a href="pricing-tables.html">Pricing Tables</a></li>
						<li><a href="icons.html">Icons</a></li>
					</ul>
				</li>


				<li class="dropdown">
					<a href="about.html#">Portfolio</a>
					<ul>
						<li><a href="portfolio-3-columns.html">3 Columns</a></li>
						<li><a href="portfolio-4-columns.html">4 Columns</a></li>
						<li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
						<li><a href="single-project.html">Single Project</a></li>
					</ul>
				</li>
				

				<li class="dropdown">
					<a href="about.html#">Blog</a>
					<ul>
						<li><a href="blog-standard.html">Blog Standard</a></li>
						<li><a href="blog-masonry.html">Blog Masonry</a></li>
						<li><a href="blog-single-post.html">Single Post</a></li>
					</ul>
				</li>


				<li class="demo-button">
				  <a href="about.html#">Get This Theme</a>
				</li> 

			</ul>
		</nav>
	</div>
</div>


<!-- Titlebar
================================================== -->
<section class="titlebar">
<div class="container">
	<div class="sixteen columns">
		<h2>About Us</h2>
		
		<nav id="breadcrumbs">
			<ul>
				<li><a href="about.html#">Home</a></li>
				<li>About Us</li>
			</ul>
		</nav>
	</div>
</div>
</section>


<!-- Content
================================================== -->

<!-- Container -->
<div class="container">

	<div class="sixteen columns">	
		<h3 class="headline">Our History</h3><span class="line margin-bottom-30"></span><div class="clearfix"></div>
	</div>

	<!-- Who We Are? -->
	<div class="eight columns">
		<p>Donec ut molestie turpis, elementum tempor metus. Vestibulum non nibh porttitor, eleifend purus eu, pulvinar orci. Quisque a gravida lorem, eu lobortis magna. Nulla auctor urna quis facilisis pretium. Cras facilisis risus sed mauris gravida.</p>
		<p>Aliquam posuere ornare convallis. Etiam vel egestas tortor. Phasellus nec rhoncus ligula. Pellentesque vitae sollicitudin nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id odio elementum sodales.</p>
	</div>

	<!-- Our Skills -->
	<div class="eight columns">

		<div id="skillzz">

			<div class="skill-bar">
				<span class="skill-title">Photoshop <i>90%</i></span>
				<div class="skill-bar-value" style="width: 90%;"></div>
			</div>
	
			<div class="skill-bar">
				<span class="skill-title">Marketing <i>80%</i></span>
				<div class="skill-bar-value" style="width: 80%;"></div>
			</div>


			<div class="skill-bar">
				<span class="skill-title">Usability <i>70%</i></span>
				<div class="skill-bar-value" style="width: 70%;"></div>
			</div>

		</div>

	</div>

</div>
<!-- Container / End -->

<br>

<!-- Container -->
<div class="container">

	<div class="four columns">
		<div class="counter-box colored">
			<i class="fa fa-thumbs-o-up"></i>
			<span class="counter">2,147</span>
			<p>Happy Customers</p>
		</div>
	</div>
	
	<div class="four columns">
		<div class="counter-box">
			<i class="fa fa-group"></i>
			<span class="counter">3,275</span>
			<p>Registered Members</p>
		</div>
	</div>

	<div class="four columns">
		<div class="counter-box">
			<i class="fa  fa-shopping-cart"></i>
			<span class="counter">289</span>
			<p>Available Products</p>
		</div>
	</div>

	<div class="four columns">
		<div class="counter-box">
			<i class="fa  fa-tree"></i>
			<span class="counter">1,563</span>
			<p>Saved Trees</p>
		</div>
	</div>

</div>
<!-- Container / End -->

<br>
<br>

<div class="parallax-banner fullwidth-element"  data-background="#000" data-opacity="0.4" data-height="200">
	<img src="images/parallax_03.jpg" alt="" />
	<div class="parallax-overlay"></div>
	<div class="parallax-title">BRINGING DESIGN TO LIFE <span>WE BUILD FUNCTIONAl DIGITAL PRODUCTS</span></div>
</div>


<!-- Container -->
<div class="container">

	<div class="sixteen columns">	
		<h3 class="headline">Our Team</h3><span class="line margin-bottom-35"></span><div class="clearfix"></div>
	</div>

	<!-- #1 -->
	<div class="one-third column">
		<article class="the-team">

			<figure class="the-team-image">
				<img src="images/team-01.jpg" alt="" />
			</figure>

			<section class="the-team-content">
				<h5>Jane Smith</h5>
				<i>Chief Executive Officer / CEO</i>
				<span>Pellentesque ultricies vehicula eleifend. Aenean eu nunc semper faucibus sapien viverra neque.</span>
					<ul class="social-icons the-team-social">
						<li><a class="facebook tooltip top" title="Facebook" href="about.html#"><i class="icon-facebook"></i></a></li>
						<li><a class="twitter tooltip top" title="Twitter" href="about.html#"><i class="icon-twitter"></i></a></li>
						<li><a class="gplus tooltip top" title="Google Plus" href="about.html#"><i class="icon-gplus"></i></a></li>
					</ul>
					<div class="clearfix"></div>
			</section>

		</article>
	</div>

	<!-- #2 -->
	<div class="one-third column">
		<article class="the-team">

			<figure class="the-team-image">
				<img src="images/team-02.jpg" alt="" />
			</figure>

			<section class="the-team-content">
				<h5>Michael Smith</h5>
				<i>Project Manager</i>
				<span>Consectetur dolor ipsum quiam dolor adipisci velit, aenean at lorem vel est posuere feugiat.</span>
					<ul class="social-icons the-team-social">
						<li><a class="facebook tooltip top" title="Facebook" href="about.html#"><i class="icon-facebook"></i></a></li>
						<li><a class="twitter tooltip top" title="Twitter" href="about.html#"><i class="icon-twitter"></i></a></li>
						<li><a class="gplus tooltip top" title="Google Plus" href="about.html#"><i class="icon-gplus"></i></a></li>
						<li><a class="linkedin tooltip top" title="Linked In" href="about.html#"><i class="icon-linkedin"></i></a></li>
					</ul>
					<div class="clearfix"></div>
			</section>

		</article>
	</div>

	<!-- #3 -->
	<div class="one-third column">
		<article class="the-team">

			<figure class="the-team-image">
				<img src="images/team-03.jpg" alt="" />
			</figure>

			<section class="the-team-content">
				<h5>John Doe</h5>
				<i>Web Designer</i>
				<span>Adipisci velit, aenean at lorem vel est posuere feugiat sed quia noneas tempora incidunt.</span>
					<ul class="social-icons the-team-social">
						<li><a class="facebook tooltip top" title="Facebook" href="about.html#"><i class="icon-facebook"></i></a></li>
						<li><a class="twitter tooltip top" title="Twitter" href="about.html#"><i class="icon-twitter"></i></a></li>
						<li><a class="dribbble tooltip top" title="Dribbble" href="about.html#"><i class="icon-dribbble"></i></a></li>
						<li><a class="forrst tooltip top" title="Forrst" href="about.html#"><i class="icon-forrst"></i></a></li>
						<li><a class="pinterest tooltip top" title="Pinterest" href="about.html#"><i class="icon-pinterest"></i></a></li>
					</ul>
					<div class="clearfix"></div>
			</section>

		</article>
	</div>



</div>
<!-- Container / End -->

<div class="margin-top-50"></div>

<!-- Footer
================================================== -->
<div id="footer">

	<!-- Container -->
	<div class="container">

		<div class="four columns">
			<img src="images/logo-footer.png" alt="" class="margin-top-10"/>
			<p class="margin-top-15">Nulla facilisis feugiat magna, ut molestie metus hendrerit vitae. Vivamus tristique lectus at varius rutrum. Integer lobortis mauris non consectetur eleifend.</p>
		</div>

		<div class="four columns">
		
			<!-- Headline -->
			<h3 class="headline footer">Customer Service</h3>
			<span class="line"></span>
			<div class="clearfix"></div>
			
			<ul class="footer-links">
				<li><a href="about.html#">Order Status</a></li>
				<li><a href="about.html#">Payment Methods</a></li>
				<li><a href="about.html#">Delivery & Returns</a></li>
				<li><a href="about.html#">Privacy Policy</a></li>
				<li><a href="about.html#">Terms & Conditions</a></li>
			</ul>

		</div>

		<div class="four columns">

			<!-- Headline -->
			<h3 class="headline footer">My Account</h3>
			<span class="line"></span>
			<div class="clearfix"></div>
			
			<ul class="footer-links">
				<li><a href="about.html#">My Account</a></li>
				<li><a href="about.html#">Order History</a></li>
				<li><a href="about.html#">Wish List</a></li>
			</ul>

		</div>

		<div class="four columns">

			<!-- Headline -->
			<h3 class="headline footer">Newsletter</h3>
			<span class="line"></span>
			<div class="clearfix"></div>
			<p>Sign up to receive email updates on new product announcements, gift ideas, special promotions, sales and more.</p>

			<form action="about.html#" method="get">
				<button class="newsletter-btn" type="submit">Join</button>
				<input class="newsletter" type="text" placeholder="mail@example.com" value=""/>
			</form>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer / End -->

<!-- Footer Bottom / Start -->
<div id="footer-bottom">

	<!-- Container -->
	<div class="container">

		<div class="eight columns">© Copyright 2014 by <a href="about.html#">trizzy</a>. All Rights Reserved.</div>
		<div class="eight columns">
			<ul class="payment-icons">
				<li><img src="images/visa.png" alt="" /></li>
				<li><img src="images/mastercard.png" alt="" /></li>
				<li><img src="images/skrill.png" alt="" /></li>
				<li><img src="images/moneybookers.png" alt="" /></li>
				<li><img src="images/paypal.png" alt="" /></li>
			</ul>
		</div>

	</div>
	<!-- Container / End -->

</div>
<!-- Footer Bottom / End -->

<!-- Back To Top Button -->
<div id="backtotop"><a href="about.html#"></a></div>

</div>


<!-- Java Script
================================================== -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="scripts/jquery.jpanelmenu.js"></script>
<script src="scripts/jquery.themepunch.plugins.min.js"></script>
<script src="scripts/jquery.themepunch.revolution.min.js"></script>
<script src="scripts/jquery.themepunch.showbizpro.min.js"></script>
<script src="scripts/jquery.magnific-popup.min.js"></script>
<script src="scripts/hoverIntent.js"></script>
<script src="scripts/superfish.js"></script>
<script src="scripts/jquery.pureparallax.js"></script>
<script src="scripts/jquery.pricefilter.js"></script>
<script src="scripts/jquery.selectric.min.js"></script>
<script src="scripts/jquery.royalslider.min.js"></script>
<script src="scripts/SelectBox.js"></script>
<script src="scripts/modernizr.custom.js"></script>
<script src="scripts/waypoints.min.js"></script>
<script src="scripts/jquery.flexslider-min.js"></script>
<script src="scripts/jquery.counterup.min.js"></script>
<script src="scripts/jquery.tooltips.min.js"></script>
<script src="scripts/jquery.isotope.min.js"></script>
<script src="scripts/puregrid.js"></script>
<script src="scripts/stacktable.js"></script>
<script src="scripts/custom.js"></script>


<!-- Style Switcher
================================================== -->
<script src="scripts/switcher.js"></script>

<div id="style-switcher">
	<h2>Style Switcher <a href="about.html#"></a></h2>
	
	<div><h3>Predefined Colors</h3>
		<ul class="colors" id="color1">
			<li><a href="about.html#" class="green" title="Green"></a></li>
			<li><a href="about.html#" class="blue" title="Blue"></a></li>
			<li><a href="about.html#" class="orange" title="Orange"></a></li>
			<li><a href="about.html#" class="navy" title="Navy"></a></li>
			<li><a href="about.html#" class="yellow" title="Yellow"></a></li>
			<li><a href="about.html#" class="peach" title="Peach"></a></li>
			<li><a href="about.html#" class="beige" title="Beige"></a></li>
			<li><a href="about.html#" class="purple" title="Purple"></a></li>
			<li><a href="about.html#" class="celadon" title="Celadon"></a></li>
			<li><a href="about.html#" class="pink" title="Pink"></a></li>
			<li><a href="about.html#" class="red" title="Red"></a></li>
			<li><a href="about.html#" class="brown" title="Brown"></a></li>
			<li><a href="about.html#" class="cherry" title="Cherry"></a></li>
			<li><a href="about.html#" class="cyan" title="Cyan"></a></li>
			<li><a href="about.html#" class="gray" title="Gray"></a></li>
			<li><a href="about.html#" class="darkcol" title="Dark"></a></li>
		</ul>
		
		<h3>Layout Style</h3>
		<div class="layout-style">
			<select id="layout-style"> 
				<option value="1">Boxed</option>
				<option value="2">Wide</option>
			</select>
		</div>
	
	<h3>Background Image</h3>
		 <ul class="colors bg" id="bg">
			<li><a href="about.html#" class="bg1"></a></li>
			<li><a href="about.html#" class="bg2"></a></li>
			<li><a href="about.html#" class="bg3"></a></li>
			<li><a href="about.html#" class="bg4"></a></li>
			<li><a href="about.html#" class="bg5"></a></li>
			<li><a href="about.html#" class="bg6"></a></li>
			<li><a href="about.html#" class="bg7"></a></li>
			<li><a href="about.html#" class="bg8"></a></li>
			<li><a href="about.html#" class="bg9"></a></li>
			<li><a href="about.html#" class="bg10"></a></li>
			<li><a href="about.html#" class="bg11"></a></li>
			<li><a href="about.html#" class="bg12"></a></li>
			<li><a href="about.html#" class="bg13"></a></li>
			<li><a href="about.html#" class="bg14"></a></li>
			<li><a href="about.html#" class="bg15"></a></li>
			<li><a href="about.html#" class="bg16"></a></li>
		</ul>
		
	<h3>Background Color</h3>
		<ul class="colors bgsolid" id="bgsolid">
			<li><a href="about.html#" class="green-bg" title="Green"></a></li>
			<li><a href="about.html#" class="blue-bg" title="Blue"></a></li>
			<li><a href="about.html#" class="orange-bg" title="Orange"></a></li>
			<li><a href="about.html#" class="navy-bg" title="Navy"></a></li>
			<li><a href="about.html#" class="yellow-bg" title="Yellow"></a></li>
			<li><a href="about.html#" class="peach-bg" title="Peach"></a></li>
			<li><a href="about.html#" class="beige-bg" title="Beige"></a></li>
			<li><a href="about.html#" class="purple-bg" title="Purple"></a></li>
			<li><a href="about.html#" class="red-bg" title="Red"></a></li>
			<li><a href="about.html#" class="pink-bg" title="Pink"></a></li>
			<li><a href="about.html#" class="celadon-bg" title="Celadon"></a></li>
			<li><a href="about.html#" class="brown-bg" title="Brown"></a></li>
			<li><a href="about.html#" class="cherry-bg" title="Cherry"></a></li>
			<li><a href="about.html#" class="cyan-bg" title="Cyan"></a></li>
			<li><a href="about.html#" class="gray-bg" title="Gray"></a></li>
			<li><a href="about.html#" class="dark-bg" title="Dark"></a></li>
		</ul>
	</div>
	
	<div id="reset"><a href="about.html#" class="button color">Reset</a></div>
		
</div>


</body>
</html>